<template>
  <el-form-item label="控件高度">
    <el-input-number v-model="activeData.height" controls-position="right" :min="0"
      placeholder="请输入高度"></el-input-number>
    <el-tooltip class="item" effect="dark" content="控件高度，单位:px，设置为0的时候，跟随全部设置" placement="top">
      <i class="el-icon-question questionIcon"></i>
    </el-tooltip>
  </el-form-item>
  <el-form-item label="最低高度">
    <el-input-number v-model="activeData.minHeight" controls-position="right" :min="0"
      placeholder="请输入高度"></el-input-number>
    <el-tooltip class="item" effect="dark" content="控件高度，单位:px，设置为0的时候，跟随全部设置" placement="top">
      <i class="el-icon-question questionIcon"></i>
    </el-tooltip>
  </el-form-item>
  <el-form-item label="标签垂直对齐" v-if="selectedWidget.type != 'static-text' && selectedWidget.category != 'container'">
    <el-radio-group v-model="activeData.labelPositionOfColumn" size="small">
      <el-radio-button value="flex-start">上对齐</el-radio-button>
      <el-radio-button value="center">居中</el-radio-button>
      <el-radio-button value="flex-end">下对齐</el-radio-button>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="标签水平对齐" v-if="selectedWidget.type != 'static-text' && selectedWidget.category != 'container'">
    <el-radio-group v-model="activeData.labelPositionOfRow" size="small">
      <el-radio-button value="flex-start">左对齐</el-radio-button>
      <el-radio-button value="center">居中</el-radio-button>
      <el-radio-button value="flex-end">右对齐</el-radio-button>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="标签两端对齐" v-if="selectedWidget.type != 'static-text' && selectedWidget.category != 'container'">
    <el-switch v-model="activeData.labelTextAlign"></el-switch>
  </el-form-item>
  <el-form-item label="标签是否折行" v-if="selectedWidget.type != 'static-text' && selectedWidget.category != 'container'">
    <el-switch v-model="activeData.labelWhiteSpace"></el-switch>
  </el-form-item>
  <el-form-item label="内容垂直对齐" v-if="selectedWidget.category != 'container' || selectedWidget.type == 'table-cell'">
    <el-radio-group v-if="selectedWidget.type != 'table-cell'" v-model="activeData.contentPositionOfColumn"
      size="small">
      <el-radio-button value="flex-start">上对齐</el-radio-button>
      <el-radio-button value="center">居中</el-radio-button>
      <el-radio-button value="flex-end">下对齐</el-radio-button>
    </el-radio-group>
    <el-radio-group v-else v-model="activeData.contentPositionOfColumn" size="small">
      <el-radio-button value="top">上对齐</el-radio-button>
      <el-radio-button value="middle">居中</el-radio-button>
      <el-radio-button value="bottom">下对齐</el-radio-button>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="内容水平对齐" v-if="selectedWidget.category != 'container'">
    <el-radio-group v-model="activeData.contentPositionOfAlign" size="small">
      <el-radio-button value="left">左对齐</el-radio-button>
      <el-radio-button value="center">居中</el-radio-button>
      <el-radio-button value="right">右对齐</el-radio-button>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="上下对齐" v-if="selectedWidget.category != 'container'">
    <el-switch v-model="activeData.alignColumn"></el-switch>
  </el-form-item>

  <borderConfig v-model:value="activeData.formItemBorderConfig"></borderConfig>
  <template v-if="selectedWidget.category != 'container'">
    <template v-if="selectedWidget.type != 'static-text'">
      <el-divider>标题设置</el-divider>
      <layoutBoxContainer v-model:value="activeData.labelPositionConfig" />
      <borderConfig v-model:value="activeData.labelBorderConfig"></borderConfig>

      <el-form-item label="是否需要冒号">
        <el-switch v-model="activeData.hasColon"></el-switch>
      </el-form-item>
      <el-form-item label="标题高度">
        <el-input-number placeholder="请输入标题高度" controls-position="right"
          v-model.number="activeData.labelHeight"></el-input-number>
        <el-tooltip class="item" effect="dark" content="标题标题高度，单位:px;默认高度为 100%" placement="top">
          <i class="el-icon-question questionIcon"></i>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="文字间距">
        <el-input-number placeholder="请输入文字间距" controls-position="right"
          v-model.number="activeData.labelSpace"></el-input-number>
        <el-tooltip class="item" effect="dark" content="标题文字间距，单位:px" placement="top">
          <i class="el-icon-question questionIcon"></i>
        </el-tooltip>
      </el-form-item>

      <el-form-item label="标题行高">
        <el-input v-model="activeData.labelLineHeight" placeholder="标题行高，如10px或1.5"></el-input>
      </el-form-item>

      <el-form-item label="标题大小">
        <el-input-number placeholder="请输入字体大小" controls-position="right"
          v-model.number="activeData.fontSize"></el-input-number>
        <el-tooltip class="item" effect="dark" content="标题文字大小，单位:px，设置为0的时候，跟随全部设置" placement="top">
          <i class="el-icon-question questionIcon"></i>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="标题宽度" v-if="![
        'divider',
        'ZHLXText',
        'link',
        'alert',
        'button',
        'table',
        'groupTitle ',
        'card',
        'row',
        'tab',
        'collapse',
      ].includes(activeData.zhlxKey)
      ">
        <el-input-number v-model="activeData.labelWidth" placeholder="标题宽度" :min="0" :precision="0"
          controls-position="right" />
        <el-tooltip class="item" effect="dark" content="标题的宽度，单位:px，设置为0的时候，跟随全部设置" placement="top">
          <i class="el-icon-question questionIcon"></i>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="标题背景色">
        <el-input v-model="activeData.labelBackgroundColor" clearable placeholder="标题背景色" size="small"
          class="border-width border-color">
          <template #append>
            <el-color-picker size="small" v-model="activeData.labelBackgroundColor" :predefine="predefineColors">
            </el-color-picker>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="标题字体">
        <el-select v-model="activeData.fontFamily" clearable filterable>
          <el-option v-for="item in fontFamilyList" :style="{ fontFamily: item.value }" :key="item.value"
            :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标题颜色">
        <el-color-picker :predefine="predefineColors" v-model="activeData.fontColor"></el-color-picker>
      </el-form-item>
    </template>
    <el-divider>内容设置</el-divider>
    <layoutBoxContainer v-model:value="activeData.contentPositionConfig" />
    <borderConfig v-model:value="activeData.contentBorderConfig"></borderConfig>
    <el-form-item label="内容背景色">
      <el-input v-model="activeData.contentBackgroundColor" clearable placeholder="内容背景色" size="small"
        class="border-width border-color">
        <template #append>
          <el-color-picker size="small" v-model="activeData.contentBackgroundColor" :predefine="predefineColors">
          </el-color-picker>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item label="内容字体">
      <el-select v-model="activeData.ContentFontFamily" clearable filterable>
        <el-option v-for="item in fontFamilyList" :style="{ fontFamily: item.value }" :key="item.value"
          :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="字体大小">
      <el-input-number placeholder="请输入字体大小" controls-position="right"
        v-model.number="activeData.contentFontSize"></el-input-number>
      <el-tooltip class="item" effect="dark" content="标题文字大小，单位:px，设置为0的时候，跟随全部设置" placement="top">
        <i class="el-icon-question questionIcon"></i>
      </el-tooltip>
    </el-form-item>
    <el-form-item label="内容行高" v-if="showContentLineHeight">
      <el-input v-model="activeData.contentLineHeight" placeholder="内容行高，如10px或1.5"></el-input>
    </el-form-item>
    <el-form-item label="内容颜色">
      <el-color-picker :predefine="predefineColors" v-model="activeData.ContentFontColor"></el-color-picker>
    </el-form-item>

    <el-form-item label="控件宽度" v-if="activeData.isSubTable">
      <el-input-number v-model="activeData.columnWidth" placeholder="控件宽度" :min="0" :precision="0"
        controls-position="right" />
    </el-form-item>
    <el-form-item label="后缀边距"
      v-if="selectedWidget.type === 'input' && (selectedWidget.options.prepend != '' || selectedWidget.options.append != '')">
      <el-input-number v-model="activeData.appendPadding" placeholder="后缀边距" :min="0" :precision="0"
        controls-position="right" />
    </el-form-item>
    <el-form-item label="后缀背景色"
      v-if="selectedWidget.type === 'input' && (selectedWidget.options.prepend != '' || selectedWidget.options.append != '')">
      <el-color-picker :predefine="predefineColors" v-model="activeData.appendBackColor"></el-color-picker>
    </el-form-item>


  </template>
</template>

<script>
import layoutBoxContainer from "./components/layoutBoxContainer";
import borderConfig from "./components/borderConfig";
import SvgIcon from "@/components/svg-icon/index.vue";
import i18n from "@/utils/i18n";
const showContentLineHeightWidgets = [
    'static-text',
    'input',
    'number',
    'select',
    'time',
    'time-range',
    'date',
    'date-range',
    'select-person',
    'select-department',
    'select-group',
    'select-role',
    'select-post',
    'select-relativePost',
    'process-comments',
    'select-unit',
    'document-number',
    'serial-number',
    'cascader',
    'user-info'
]

export default {
  name: "comStyle-editor",
  components: {
    borderConfig,
    layoutBoxContainer,
    SvgIcon,
  },
  mixins: [i18n],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  inject: ["getServerSubFormList", "getDesignerConfig"],
  data() {
    return {
      predefineColors: [
        "#000000",
        "#ff0000",
        "#ff8c00",
        "#ffd700",
        "#90ee90",
        "#00ced1",
        "#1e90ff",
        "#c71585",
        "#c7158577",
      ],
      generalWidthOptions: [
        "600px",
        "800px",
        "1000px",
        "40%",
        "50%",
        "60%",
        "70%",
        "80%",
      ],
      fullScreenWidthOptions: [
        "800px",
        "1000px",
        "1200px",
        "1400px",
        "50%",
        "60%",
        "70%",
        "80%",
        "90%",
        "100%",
      ],
      pdfDialogVisible: false,
      activeData: {
        fontColor: ""
      },
      fontFamilyList: [
        {
          label: "微软雅黑",
          value: "Microsoft YaHei"
        },
        {
          label: "仿宋_GB2312",
          value: "FangSong"
        },
        {
          label: "仿宋",
          value: "仿宋"
        },
        {
          label: "宋体",
          value: "SimSun"
        },
        {
          label: "方正小标宋简体",
          value: "方正小标宋简体"
        },
        {
          label: "方正小标宋_GBK",
          value: "方正小标宋_GBK"
        },
        {
          label: "楷体_GB2312",
          value: "楷体_GB2312"
        },
        {
          label: "等线",
          value: "等线"
        },
        {
          label: "黑体",
          value: "黑体"
        },
        {
          label: "arial",
          value: "Arial"
        },
        {
          label: "CALIBRI",
          value: "Calibri"
        },
        {
          label: "Cambria",
          value: "Cambria"
        },
        {
          label: "cour",
          value: "Courier New"
        },
        {
          label: "symbol",
          value: "Symbol"
        },
        {
          label: "times",
          value: "Times New Roman"
        },
        {
          label: "wingding",
          value: "Wingdings"
        },
      ],
    };
  },
  computed: {
    showContentLineHeight() {
      return showContentLineHeightWidgets.includes(this.selectedWidget.type)
    }
  },
  watch: {
    activeData: {
      deep: true,
      handler(val) {
        this.optionModel.comStyle = val;
        this.selectedWidget.options.comStyle = val
      },
    },
    optionModel: {
      deep: true,
      handler(val) {
        this.activeData = val.comStyle;
      }
    }
  },
  created() {
    if (this.optionModel.comStyle != '{}') {
      this.activeData = this.optionModel.comStyle
    }
    if (this.selectedWidget.category != 'container') {
      if (!this.activeData.fontColor) {
        this.activeData.fontColor = ''
      }
      if (!this.activeData.fontFamily) {
        this.activeData.fontFamily = '仿宋'
      }
      if (!this.activeData.fontSize) {
        this.activeData.fontSize = 18
      }
      if (!this.activeData.labelPositionOfColumn) {
        this.activeData.labelPositionOfColumn = 'center'
      }
    }
  },
  methods: {},
};
</script>

<style lang="scss" scoped></style>